import React, { memo } from 'react'

import { ThemeCoverWrapper } from './style'

import {
  getSizeImage,
  getCount
} from "@/utils/format-utils";

export default memo(function WYThemeCover(props) {
  const { info } = props

  return (
    <ThemeCoverWrapper>
      <div className="cover-top">
        <img src={getSizeImage(info.picUrl || info.coverImgUrl, 140)} alt=""/>
        <div className="cover sprite_covor"></div>
        <div className="bottom sprite_covor">
          <i className="sprite_icon erji"></i>
          <span className="number">{getCount(info.playCount)}</span>
          <i className="sprite_icon play"></i>
        </div>
      </div>
      <div className="cover-bottom">{info.name}</div>
      <div className="cover-resource">by {info.copywriter}</div>
    </ThemeCoverWrapper>
  )
})